<template>
	<view class="active-details" @click="hiddenCombox()">
		<view class="activity-info" v-if="activityInfo.id">
			<view class="info">
				<view class="user-info">
					<image class="head" :src="headHandle(activityInfo)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{activityInfo.publicUserName}}</text>
						<text class="time">{{handleTime(activityInfo.add_time)}}</text>
					</view>
				</view>
			
				<text class="active-type" v-if="0">来自团委</text>
			</view>
			<view class="content">
				<view class="cont-title">
					{{activityInfo.title}}
				</view>
				<text class="cont-text">{{activityInfo.content}}</text>
				<view class="time-type">
					<text>活动类型：{{activityInfo.type_name}}</text><br>
					<text>活动截止时间：{{handleTime(activityInfo.end_date)}}</text>
				</view>
			</view>
			<view class="images-box" v-if="activityInfo.dst_imgs">
				<image class="img" v-for="(path, i) in activityInfo.dst_imgs" :key="i" :src="path" @click="previewImage(activityInfo.dst_imgs, i)" mode="aspectFill"></image>
			</view>
		</view>
		<view v-else class="activity-info">活动已删除</view>
		<view class="activity-type" v-if="!myPublish">
			<view class="tabs">
				<text v-for="item in tabs" :key="item.id" :class="[{active: tabIndex==item.id}]" @click="changeTab(item.id)">{{item.name}}</text>
			</view>
			<view v-if="tabIndex==0" class="sign-up">
				<view class="sign-item">
					<text class="name">姓名</text>
					<view class="input">
						<input type="text" disabled :value="sign_info.name" placeholder="请输入姓名" placeholder-style="color: #BEC2CC" >
					</view>
				</view>
				<view class="sign-item">
					<text class="name">班级</text>
					<view class="input">
						<input type="text" disabled :value="sign_info.clas" placeholder="请输入班级" placeholder-style="color: #BEC2CC" >
					</view>
				</view>
				<view class="sign-item">
					<text class="name">MBTI人格</text>
                    <text v-if="sign_info.id">{{sign_info.mbti}}</text>
					<uni-combox
                        v-else
						ref="combox"
						class="select-filter"
						:candidates="mbti_list"
						placeholder="请选择一个MBTI人格"
						:border="false"
						v-model="sign_info.mbti"
						@change="comboxChange"></uni-combox>
				</view>
				<view class="sign-item">
					<text class="name">个人简介</text>
					<view class="input">
						<textarea type="text" :disabled="sign_info.id?true:false" :value="sign_info.brief" placeholder="请输入个人简介" placeholder-style="color: #BEC2CC" @input="profileInput"></textarea>
					</view>
				</view>
				<view class="confirm-sign" @click="signUpActivity" v-if="!sign_info.id&&!isExpired" :style="{opacity: sign_info.brief&&sign_info.mbti&&sign_info.clas&&sign_info.name?1:0.3}">
					<text>确认报名</text>
				</view>
			</view>
			<view v-else-if="tabIndex==1" class="participation">
				<view class="sign-item">
					<text class="name">作品上传</text>
					<view class="input">
                        <upload-btn
                            v-if="work_files.length==0"
                            :icon-info="{width: '180rpx', icon: '/static/add.png'}"
							type="file"
                            @chooseFile="chooseFile"
                        ></upload-btn>
                        <view v-if="work_files.length>0" style="position: relative;">
                            <image v-if="!work_id" class="close-btn" @click="work_files.splice(0)" src="/static/chat/close.png" mode="aspectFill"></image>
                            <zy-file v-for="(file, i) in work_files" :key="i" :src="file.path" :name="file.name" :size="file.size" :width="'460rpx'"></zy-file>
                        </view>
					</view>
				</view>
				<view class="sign-item">
					<text class="name">作品简介</text>
					<view class="input">
						<textarea type="text" :disabled="work_id?true:false" :value="work_profile" placeholder="请输入作品说明" placeholder-style="color: #BEC2CC" @input="workProfileInput"></textarea>
					</view>
				</view>
				<view class="confirm-sign" v-if="!work_id&&!isExpired" @click="participationActivity()" :style="{opacity: work_profile&&work_files.length>0?1:0.3}">
					<text>确认上传</text>
				</view>
			</view>
			<view v-else-if="tabIndex==2" class="results">
				<view v-if="activityResult.evaluate_account_id">
					<view class="res-item">
						<text class="name">恭喜您获得：</text>
						<view class="score">
							<text class="medal-name">{{ activityResult.medal_name }}</text>
							<image src="/static/jiangpai.png" mode="aspectFill"></image>
							<text class="score-text">{{activityResult.evaluation}}</text>
						</view>
					</view>
					<view class="tea-eva">
						<view class="eva-title">
							<text>老师评语</text>
						</view>
						<view class="eva-content">
							<view class="info-time">
								<view class="tea-info">
									<image :src="utils.headImage(allMembers[activityResult.evaluate_account_id])" mode="aspectFill"></image>
									<text>{{allMembers[activityResult.evaluate_account_id]?allMembers[activityResult.evaluate_account_id].name:''}}老师</text>
								</view>
								<text style="color: #999999;font-size: 24rpx;">{{handleTime(activityResult.evaluate_time)}}</text>
							</view>
							<view class="eva-score">
								<image src="/static/score1.png" v-for="i in activityResult.score_teacher" :key="i"  mode="aspectFill" ></image>
							</view>
							<view class="eva-text">
								{{activityResult.evaluate_content}}
							</view>
						</view>
					</view>
				</view>
				<view v-else style="margin-top: 32rpx;color: #999999;font-size: 30rpx;text-align: center;">暂无活动结果</view>
			</view>
			<view v-else-if="tabIndex==3" class="experience">
				<view class="text-box" v-if="!activityResult.realize_content">
					<textarea :value="exp_text" maxlength="500" placeholder-style="color: #999999" @input="expInput" placeholder="教师审核通过后才能发布活动心得"></textarea>
				</view>
				<view class="text-box-show" v-else>
					<text>{{activityResult.realize_content}}</text>
				</view>
				<view v-if="!activityResult.realize_content && originalPublish!=1" class="confirm-sign" @click="publishRealize()">
					<text >保存并分享</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import uploadBtn from './components/select-upload-file.vue'
export default {
    components: {
        uploadBtn
    },
	data() {
		return {
			accountId: '', // 用户的账号ID
			originalPublish: '', // 是否是原创发布过来的
			myPublish: '', // 是否是我的发布过来的
			activityId: '',
			activityInfo: {}, // 活动信息
			isExpired: false, // 是否过期
			activityResult: {},
			tabIndex: 0,
			tabs: [{
				id: 0,
				name: '活动报名',
			},
			{
				id: 1,
				name: '活动参与'
			},
			{
				id: 2,
				name: '活动结果'
			},
			{
				id: 3,
				name: '活动心得'
			}],
			sign_info: {
				name: '',
				clas: '',
				mbti: '',
				brief: ''
			},
			mbti_list: {ISTJ: '军事官人格/ISTJ', ISFJ: '守卫者人格/ISFJ', INFJ: '提倡者人格/INFJ', INTJ: '建筑师人格/INTJ', ISIP: '鉴赏家人格/ISIP', ISFP: '探险家人格/ISFP', INFP: '调停者人格/INFP', INIP: '逻辑学家人格/INIP', ESTP: '企业家人格/ESTP', ESFP: '竞选者人格/ESFP', ENFP: '竞选者人格/ENFP', ENTP: '辩论家人格/ENTP', ESTJ: '总经理人格/ESTJ', ESFJ: '执行官人格/ESFJ', ENFJ: '主人公人格/ENFJ', ENTJ: '指挥官人格/ENTJ'},
            // 活动参与
            work_id: '',
			work_files: [],
			work_profile: '',
			// 活动心得
			exp_text: '',
			allMembers: [],
		}   
	},
	onLoad(options) {
		
		this.activityId = options.id
		this.originalPublish = options.original || ''
		this.myPublish = options.myPublish || ''
		
		// 当前用户的accountId
		let currentAccountId = uni.getStorageSync('tokenObj').accountId
		if(options.accountId == currentAccountId){
			// 如果是自己查看，显示活动报名和作品上传信息
			this.originalPublish = '';
		}
		this.accountId = options.accountId || currentAccountId
		this.getActivityParInfo()
		// 获取全校师生
		this.allMembers = uni.getStorageSync('allFindMembers')||[]
	},
	methods: {
		
		headHandle(info){
			// 处理头像显示
			info.avatarUrl = info.publicPic
			let type = this.allMembers[info.publisher_account_id]?this.allMembers[info.publisher_account_id].userType:2
			info.userType = type
			return this.utils.headImage(info)
		},
		// 处理评价头像
		evaHeadHandle(info){
			let type = this.allMembers[info.create_account_id]?this.allMembers[info.create_account_id].userType:2
			info.avatarUrl = info.createPic
			info.userType = type
			return this.utils.headImage(info)
		},
		handleTime(time){
			if(!time) return
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		changeTab(i){
			if(this.originalPublish==1 && i<2){
				return
			}
			this.tabIndex = i
		},
		// 获取活动详情
		getActivityParInfo(){
			if(!this.myPublish){
				this.getActivityStuInfo()
				if(this.originalPublish == 1){
					this.tabIndex = 2
				} else {
					this.getUserEnrollInfo()
				}
			}
				
			this.api.get('activity/getActivityInfo', {
				activityId: this.activityId
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.activityInfo = res.data.activity
				let endDate = this.activityInfo.end_date?this.activityInfo.end_date.split('-').join('/'):''
				if(new Date() > new Date(endDate)){
					this.isExpired = true
				}
                if(this.activityInfo.files){
					this.handleFilesShow(this.activityInfo.files)
				}
			
			})
		},
		// 获得报名信息
		getUserEnrollInfo(){
			
			this.api.get('activity/getUserEnrollInfo', {
				activityId: this.activityId,
				accountId: this.accountId
			}).then(res=>{
				// 用户信息
				let userInfo = getApp().globalData.userInfo;
				let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
				let clasItem = newOrgGraders.find(clas=>Object.keys(clas)[0]==userInfo.clasId) || {}
				userInfo.clasName = Object.values(clasItem)[0]
				this.sign_info.clas = Object.values(clasItem)[0]
				this.sign_info.name = userInfo.name
                this.sign_info = res.data.activityEnroll || this.sign_info
			})
		},
		// 查询某个学生的活动参与情况
		getActivityStuInfo(){
			this.api.get('activity/getActivityUserJoinInfo', {
				activityId: this.activityId,
				accountId: this.accountId
			}).then(res=>{
				if(res.data.state != 'ok') return
                let info = res.data.activityUserInfo||{}
				this.activityResult = info
                this.work_id = info.id
                this.work_files = info.files?JSON.parse(info.files):[]
                this.work_profile = info.description
			})
		},
		profileInput(e){
			this.sign_info.brief = e.detail.value
		},
		comboxChange(i){
		},
		// 活动报名
		signUpActivity(){
			let info = this.sign_info, msg = ''
			if(!info.clas){
				msg = '请填写班级'
			}else if(!info.name){
				msg = '请填写姓名'
			}else if(!info.brief){
				msg = '请填写个人简介'
			}else if(!info.mbti){
				msg = '请选择MBTI人格'
			}
			if(msg!=''){
				this.utils.showToast(msg)
				return
			}
			this.api.post('activity/signUpActivity', {
				activityId: this.activityId,
				name: info.name,
				clas: info.clas,
				mbtiPersonality: info.mbti,
				describe: info.brief
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.utils.showToast('报名成功')
				setTimeout(()=>{
					this.getUserEnrollInfo()
				}, 2000)
			})
		},
		// 活动参与
		workProfileInput(e){
			this.work_profile = e.detail.value
		},
        chooseFile(type, list, sendList){
            if(sendList.length==0) return
            this.work_files = sendList
        },
		// 学生上传活动参与情况
		participationActivity(){
			if(!this.work_profile){
				this.utils.showToast('请填写作品简介')
				return
			}
			if(this.work_files.length==0){
				this.utils.showToast('请上传作品')
				return
			}
			this.api.post('activity/participationActivity', {
				activityId: this.activityId,
				description: this.work_profile,
				files: JSON.stringify(this.work_files)
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.utils.showToast('上传成功')
				setTimeout(()=>{
					this.getActivityStuInfo()
				}, 2000)
			})
		},
		// 活动心得
		expInput(e){
			this.exp_text = e.detail.value
		},
		// 发表活动心得
		publishRealize(){
			if(!this.exp_text){
				this.utils.showToast('心得内容不能为空')
				return
			}
			let publish = (isShare)=>{
				this.api.post('activity/publishRealize', {
					activityId: this.activityId,
					content: this.exp_text,
					isShare: isShare
				}).then(res=>{
					if(res.data.state != 'ok') return
					if(isShare){
						this.utils.showToast('保存并分享成功')
					}else{
						this.utils.showToast('保存成功')
					}
					setTimeout(()=>{
						this.getActivityStuInfo()
					}, 2000)
				})
			}
			let cancelShare = ()=>{
				publish(false)
			}
			let confirmShare = ()=>{
				publish(true)
			}
			
			this.utils.showModal('', '是否分享到内容推荐？', confirmShare, {confirmText: '是', cancelText: '否'}, cancelShare)
		},
		// 获取显示图片的链接
		handleFilesShow(list, index){
			list = JSON.parse(list)
			let imgs = []
			for(let i=0; i<list.length; i++){
				imgs.push(`${this.api.xiaodeObsUrl}${list[i].path}`)
				
			}
			this.$set(this.activityInfo, 'dst_imgs', imgs)

		},
		previewImage(list, i){
			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
			
		},
		hiddenCombox(){
			if(this.$refs.combox){
				this.$refs.combox.onBlur()
			}
			
		}
	}
}
</script>
<style lang="less" scoped>
	.active-details{
		
	}
	.activity-info{
		padding: 32rpx 32rpx 16rpx;
		background-color: #fff;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.active-type{
		font-size: 28rpx;color: #666666;
	}
	.user-info{
		display: flex;
		.head{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-time{
		margin-left: 24rpx;
		.name{
			display: block;
			line-height: 44rpx;
			
		}
		.time{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.content{
		margin-top: 24rpx;
	}
	.cont-title{
		color: #333;
		line-height: 40rpx;
		font-weight: 600;
	}
	.cont-text{
		margin-top: 24rpx;
		display: block;
		color: #666666;
		line-height: 44rpx;
	}
	.time-type{
		margin-top: 24rpx;
		color: #666;
		line-height: 44rpx;
	}
	.images-box{
		margin-top: 40rpx;
	}
	.images-box{
		font-size: 0;
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	
	.activity-type{
		border-top: 20rpx solid #F9F9F9;
		padding-top: 25rpx;
		background-color: #fff;
	}
	.tabs{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 68rpx;
		padding: 0 32rpx;
		background-color: #fff;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
		text{
			line-height: 68rpx;
			color: #666666;
		}
		.active{
			font-weight: 600;
			color: #333;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				height: 4rpx;
				width: 80rpx;
				background-color: #333333;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.sign-up, .participation{
		padding: 20rpx 32rpx 56rpx;
	}
	.sign-item{
		padding: 36rpx 0;
		display: flex;
		position: relative;
		font-size: 30rpx;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #F0F0F0;
			transform: scale(0.5) translateX(-50%);
		}
		.name{
			width: 168rpx;
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		input{
			width: 438rpx;
			font-size: 30rpx;
		}
		textarea{
			width: 438rpx;
			height: 92rpx;
			font-size: 30rpx;
		}
	}
    .close-btn{
        position: absolute;
        top: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
    }
	.uni-combox{
		padding: 0;
		width: 500rpx;
	}
	.confirm-sign{
		margin: 56rpx auto 0;
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #28C2CD;
		border-radius: 20rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
	}
	// 活动结果
	.results{
		padding: 27rpx 32rpx 56rpx;
	}
	.res-item{
		display: flex;
		padding: 32rpx 0 60rpx;
		.name{
			margin-right: 20rpx;
			color: #999999;
			font-size: 30rpx;
			white-space: nowrap;
			line-height: 20rpx;
		}
		.score{
			font-size: 0;
			text-align: center;
			min-width: 200rpx;
			image{
				width: 93rpx;
				height: 107rpx;
			}
		}
		.medal-name{
			display: block;
			font-size: 24rpx;
			margin-bottom: 35rpx;
			line-height: 20rpx;
		}
		.score-text{
			margin-top: 35rpx;
			display: block;
			color: #162641;
			font-size: 38rpx;
		}
	}
	.eva-title{
		padding-bottom: 32rpx;
		color: #999999;
		font-size: 30rpx;
		border-bottom: 1rpx dotted rgba(0, 0,0, .1);
	}
	
	// 评价
	.eva-content{
		margin-top: 32rpx;
	}
	.info-time{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 78rpx;
			height: 78rpx;
			border-radius: 39rpx;
			margin-right: 24rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		color: #999999;
		image{
			margin-right: 17rpx;
			width: 34rpx;
			height: 32rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	// 活动心得
	.experience{
		padding: 31rpx 32rpx  56rpx;
		textarea{
			width: 654rpx;
			height: 374rpx;
			
		}
	}
	.text-box{
		padding: 32rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
	}
	.text-box-show{
		padding: 32rpx 0;
		line-height: 44rpx;
	}
	.ex-btn{
		margin-top: 56rpx;
		text-align: center;
		text{
			display: inline-block;
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	.keep-btn{
		color: #333333;
		position: relative;
		margin-right: 30rpx;
		&::after{
			position: absolute;
			left: -160rpx;
			top: -40rpx;
			content: '';
			width: 640rpx;
			border: 2rpx solid #999999;
			border-radius: 40rpx;
			height: 160rpx;
			transform: scale(0.5);
		}
	}
	.share-btn{
		background-color: #28C2CD;
		color: #fff;
	}
</style>